﻿<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>珠峰社区</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- basic styles -->
  <link href="/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="/css/font-awesome.min.css" />
  <link rel="stylesheet" href="/css/community.css" />
  <!--[if lt IE 9]>
  <script src="/js/respond.min.js"></script>
  <![endif]-->
</head>

<body>
<% include ./include/header %>
<div class="main-container" id="main-container">
  <div class="main-container-inner">

    <a class="menu-toggler" id="menu-toggler" href="#"> <span class="menu-text"></span> </a>
    <div class="sidebar" id="sidebar">
      <ul class="nav nav-list">
        <%
          if(categories && categories.length){
          for(var i=0;i<categories.length;i++){
          var category = categories[i];
            %>
              <li> <a href="#" class="dropdown-toggle"> <i class="icon-desktop"></i> <span class="menu-text"><%= category.name%></span> <b class="arrow icon-angle-down"></b> </a>
              <%
                 if(category.children && category.children.length){
                    %>
                      <ul class="submenu">
                        <%
                          for(var j=0;j<category.children.length;j++){
                            var subCategory = category.children[j];
                            %>
                            <li> <a href="#"> <i class="icon-double-angle-right"></i> <%=subCategory.name%></a> </li>
                          <%
                            if(subCategory.children && subCategory.children.length){
                              for(var m=0;m<subCategory.children.length;m++){
                                var thirdCategory = subCategory.children[m];
                          %>
                                <li> <a href="#"> <i class="icon-double-angle-right"></i> <%=thirdCategory.name%></a> </li>
                             <%

                             if(thirdCategory.articles && thirdCategory.articles.length){
                             %> <ul class="submenu"><%
                          for(var j=0;j<thirdCategory.articles.length;j++){
                            var article = thirdCategory.articles[j];
                          %>
                          <li> <a href="/article/view/<%=article._id%>"> <i class="icon-double-angle-right"></i> <%=article.articleTitle%></a> </li>
                          <%
                          }
                          %></ul><%
                        }

                              }
                            }else{
                              if(subCategory.articles && subCategory.articles.length){
                             %> <ul class="submenu"><%
                          for(var j=0;j<subCategory.articles.length;j++){
                            var article = subCategory.articles[j];
                          %>
                          <li> <a href="/article/view/<%=article._id%>"> <i class="icon-double-angle-right"></i> <%=article.articleTitle%></a> </li>
                          <%
                          }
                          %></ul><%
                        }
                        }
                          }
                        %>
                      </ul>
                    <%
                 }else{
                   if(category.articles && category.articles.length){
                     %> <ul class="submenu"><%
                     for(var j=0;j<category.articles.length;j++){
                       var article = category.articles[j];
                        %>
                           <li> <a href="/article/view/<%=article._id%>"> <i class="icon-double-angle-right"></i> <%=article.articleTitle%></a> </li>
                        <%
                     }
                      %></ul><%
                   }
                 }
              %>
            <%
            }
          }
         %>
      </ul>
      <div class="sidebar-collapse" id="sidebar-collapse">
        <i class="icon-double-angle-left"  data-icon2="icon-double-angle-right"></i>
      </div>
    </div>
    <div class="main-content">
      <div class="breadcrumbs" id="breadcrumbs">

        <ul class="breadcrumb">
          <li> <i class="icon-home home-icon"></i> <a href="#">首页</a> </li>
        </ul>


        <div class="nav-search" id="nav-search">
          <form class="form-search">
            <span class="input-icon">
            <input type="text" placeholder="Search ..." class="nav-search-input" id="nav-search-input" autocomplete="off" />
            <i class="icon-search nav-search-icon"></i> </span>
          </form>
        </div>

      </div>

      <div class="page-content" style="width: 100%">
        <div class="page-header">
          <h1>
            推荐阅读
          </h1>
        </div>


        <div class="row">
          <div class=" col-md-6 ">
              <div class="tabbable " >
                <ul class="nav nav-tabs" id="myTab32">
                  <%
                   if(articles&& articles.length){
                     for(var i=0;i<articles.length;i++){
                       %>
                  <li <%=i==0?"class='active'":""%>>
                    <a data-toggle="tab" href="#id_<%=articles[i]._id%>">
                      <i class="pink icon-dashboard bigger-110"></i>
                      <%=articles[i].articleTitle%>
                    </a>
                  </li>
                  <%
                     }
                   }
                    %>
                </ul>

                <div class="tab-content">
                  <%
                  if(articles&& articles.length){
                  for(var i=0;i<articles.length;i++){
                  %>
                  <div id="id_<%=articles[i]._id%>" class="tab-pane in active">
                    <%=articles[i].articleTitle%>
                  </div>
                  <%
                  }
                  }
                  %>
                </div>
              </div>
          </div>
          <div class=" col-md-6 ">

            <div class="widget-box">
              <div class="widget-header widget-header-flat">
                <h4>课程大纲</h4>
              </div>

              <div class="widget-body">
                <div class="widget-main">

                  <div class="row">
                    <%
                     if(categories && categories.length){
                       for(var i=0;i<categories.length;i++){
                        var category = categories[i];
                        %>
                          <div class="col-sm-6 col-md-12">
                            <h4 style="color:#008ec4;text-indent: 0.5em;">
                              <%=category.name%>
                            </h4>
                            <ul>
                              <%
                               if(category.children && category.children.length){
                                 for(var j=0;j<category.children.length;j++){
                                var subCategory = category.children[j];
                                   %>
                                    <li><%=subCategory.name%></li>
                                <%
                                 }
                               }
                                %>
                            </ul>
                          </div>
                        <%
                       }
                     }
                      %>
                  </div>
                  </div>
                </div>
            </div>



          </div>
        </div>


      </div>


    </div>



  </div>

  <a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse"> <i class="icon-double-angle-up icon-only bigger-110"></i> </a> </div>






<!--登录结束-->
<script src="/js/jquery-2.0.3.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/ace.js"></script>
<script type="text/javascript">
  function show_box(id) {
    jQuery('.widget-box.visible').removeClass('visible');
    jQuery('#'+id).addClass('visible');
  }
  jQuery("#register").on("click",function(){
    jQuery("#signup-box").addClass('visible');
    jQuery('#login-box').removeClass('visible')
  })
  jQuery("#login").on("click",function(){
    jQuery("#login-box").addClass('visible');
    jQuery('#signup-box').removeClass('visible')
  })
</script>
</body>
</html>
